<template>
  <div>
    <x-input :title="title" class="weui-vcode" v-model="userPas" :placeholder="`请输入${title}`" :show-clear="false" :min="6" :max="6" @on-change="testYzm" :label-width="labelWidth">
      <x-button v-if="type === 'button'" slot="right" type="primary" :text="codeText" :disabled="disableCode" @click.native="postCode" mini style="height: 0.5rem;line-height: 0.5rem;"></x-button>
      <a v-if="type === 'text'" slot="right" :class="{blue: !isTime, cry: isTime}" href="javascript:void(0)" @click="postCode">{{ codeText }}</a>
    </x-input>
  </div>
</template>

<script>
export default {
  name: 'zxSmsCode',
  model: {
    prop: 'userCode',
    event: 'change'
  },
  props: {
    userCode: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    },
    title: {
      type: String,
      default () {
        return ''
      }
    },
    labelWidth: {
      type: String,
      default: '2.05rem'
    },
    isDisabled: {
      type: String,
      default: 'true'
    },
    codeTypeVal: {
      type: String,
      default: 'true'
    },
    sendObj: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      userPas: '', // 验证码
      codeText: '获取验证码', // 验证按钮显示内容
      codeTime: 50, // 验证码倒计时
      isTime: null, // 验证码状态
      disableCode: false // 按钮状态，可用不可用
    }
  },
  methods: {
    testYzm (val) {
      this.$emit('update:userCode', val)
      this.$emit('change', val)
    },
    postCode () {
      console.log(JSON.stringify(this.sendObj))
      let lVue = this
      if (!lVue.isTime) {
        this.$bridge.callhandler('nativeRequest',
          JSON.stringify({
            'requstSource': 'internetRequest',
            'url': 'mstep.do?act=business',
            'params': {'method_Name': 'getCode', 'basic_Data': JSON.stringify(this.sendObj)}
          }), (response) => {
            let respData = JSON.parse(response).data
            console.log(respData)
            if (respData.head.respCode === '000000') { // 返回000000为正常，否则输出错误
              lVue.userPas = respData.body.veryCode
              this.$emit('send-mobile', respData.body.mobile)
            } else { // 调用原生提示，输出错误内容
              this.$bridge.callhandler('showErrorHUD', {
                'type': 'toast',
                'errorMess': respData.head.respMsg
              })
            }
          }
        )
        lVue.codeText = (lVue.codeTime + 's后可重新发送')
        lVue.isTime = setInterval(() => {
          lVue.codeTime--
          if (lVue.codeTime === 0) {
            lVue.codeText = '获取' + this.title
            lVue.disableCode = false
            clearInterval(lVue.isTime)
            lVue.isTime = null
            lVue.codeTime = 50
            return
          }
          lVue.codeText = lVue.codeTime + 's后可重新获取'
        }, 1000)
      }
      lVue.disableCode = true
    }
  },
  watch: {
    isDisabled (val) {
      if (val === 'false') {
        this.title = '激活码'
        this.isTime = true
        this.disableCode = true
        this.codeText = '获取' + this.title
      }
    },
    codeTypeVal () {
      if (this.codeTime !== 50 && this.codeTime !== 0) {
      } else {
        this.isTime = null
        this.disableCode = false
      }
    }
  }
}
</script>
